<template>
    <el-table border :data="data" v-loading="loading">
        <el-table-column align="center" prop="record_time" :label="$i18n.t('RECORD_TIME')"></el-table-column>
        <el-table-column align="center" prop="level" :label="$i18n.t('COLLECTION_STAGE')" :min-width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.level === 0" type="primary" size="mini" effect="dark">{{ scope.row.level_text }}</el-tag>
                <el-tag v-else-if="scope.row.level === 1" type="warning" size="mini" effect="dark">{{ scope.row.level_text }}</el-tag>
                <el-tag v-else type="danger" size="mini" effect="dark">{{ scope.row.level }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="overdue_day" :label="$i18n.t('OVERDUE_DAY')"></el-table-column>
        <el-table-column align="center" prop="contact_name" :label="$i18n.t('CONTACT_NAME')"></el-table-column>
        <el-table-column align="center" prop="contact_relation" :label="$i18n.t('CONTACT_RELATION')"></el-table-column>
        <el-table-column align="center" prop="contact_result" :label="$i18n.t('CONTACT_RESULT')"></el-table-column>
        <el-table-column align="center" prop="repayment_wish" :label="$i18n.t('REPAYMENT_WISH')"></el-table-column>
        <el-table-column align="center" prop="remark" :label="$i18n.t('REMARK')"></el-table-column>
        <el-table-column align="center" prop="operator" :label="$i18n.t('OPERATOR')"></el-table-column>
    </el-table>
</template>

<script>
    import { getCollectionDetail } from '@/api/collection'

    export default {
        name: 'CollectionFollowRecord',
        watch: {
            id () {
                this.loading = true
                getCollectionDetail(this.id, { method: 'CollectionRecord' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                id: null,
                loading: false,
                data: []
            }
        },
        activated () {
            this.id = this.$route.query.id
        },
        created () {
            this.id = this.$route.query.id
        }
    }
</script>

<style scoped>

</style>
